<template>
  <div class="goods-list">
    <div class="goods-list-content">
      <ul v-if="goodsData.list?.length > 0" class="goods">
        <li v-for="goods in goodsData.list" :key="goods.goodsId" @click="onGoodsClick(goods)">
          <img :src="goods.goodsImg?.split(',')[0]" />
          <div class="info">
            <div class="goods-price">
              <span class="price">￥{{ goods.goodsSalesPrice ? goods.goodsSalesPrice.toFixed(2) : '' }}</span>
              <div class="shoppingcart" @click.stop="onCartClick(goods)">
                <img src="@/assets/images/gouwuche.svg" />
              </div>
            </div>
            <p class="goods-name">{{ goods.goodsName }}</p>
            <p class="goods-sub" v-if="goods.goodsSubtitle">{{ goods.goodsSubtitle }}</p>
            <p class="goods-brand">
              <div class="sitePng">
                <img src="@/assets/images/供应商标识.png" />
              </div>
              <span class="siteBrand">品牌 : {{ goods.brand }}</span>
            </p>
          </div>
        </li>
      </ul>

      <el-empty v-else description="暂无商品"></el-empty>

      <Pager v-if="goodsData.list?.length > 0" :page="goodsData.search.page" :total="goodsData.total" :limit="goodsData.search.limit" @current-change="onCurrentChange" />
    </div>
  </div>
  <Cart v-model:visible="cartVisible" ref="shoopingCartRef" :goodsId="goodsData.currentGoodsId" />
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import Pager from '@/components/pager/index.vue'
import Cart from '@/components/cart/index.vue'

const route = useRoute()
const router = useRouter()

const keyword = route.query.keyword || ''
const { supplierType, goodsType, goodsCatIdFirst, goodsCatIdSecond } = route.query

const goodsData = reactive({
  total: 0,
  list: [],
  search: {
    page: 1,
    limit: consts.Limit,
    searchKeyword: ''
  },
  currentGoodsId: ''
})

const cartVisible = ref(false)
const shoopingCartRef = ref()

const loadData = async () => {
  if (keyword !== '') {
    let url = `/medinstrument/site/search`
    let { err, data } = await api.post(url, { supplierType, keyword, pageNum: goodsData.search.page, pageSize: goodsData.search.limit })
    if (err) {
      ElMessage.error(err)
    } else {
      goodsData.list = data.list
      goodsData.list.forEach(item =>{
        item.goodsExpandparamValueList.forEach(goods=>{
          if (goods.expandparamName == '品牌'){
            item.brand = goods.expandparamValueName;
          }else{
            item.brand ? item.brand : '';
          }
        })
      })
      goodsData.total = data.count
    }
  } else {
    let url = `/medinstrument/site/list?goodsType=${goodsType}&page=${goodsData.search.page}&limit=${goodsData.search.limit}`
    if (route.query.goodsCatIdFirst || route.query.goodsCatIdSecond) {
      url = `/medinstrument/site/list?goodsType=${goodsType}&page=${goodsData.search.page}&limit=${goodsData.search.limit}&goodsCatIdFirst=${goodsCatIdFirst}&goodsCatIdSecond=${goodsCatIdSecond}`
    }
    let { data, err } = await api.get(url)
    if (err) {
      ElMessage.error(err)
    } else {
      goodsData.list = data.goodsList
      goodsData.list.forEach(item =>{
        item.goodsExpandparamValueList.forEach(goods=>{
          if (goods.expandparamName == '品牌'){
            item.brand = goods.expandparamValueName;
          }else{
            item.brand ? item.brand : '';
          }
        })
      })
      goodsData.total = data.count
    }
  }
}

const onGoodsClick = (goods) => {
  let { href } = router.resolve({
    path: `/goods/${goods.goodsId}`
  })
  window.open(href, '_blank')
}

const onCartClick = (goods) => {
  goodsData.currentGoodsId = goods.goodsId
  cartVisible.value = true
}

const onCurrentChange = (val) => {
  goodsData.search.page = val
  loadData()
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.goods-list {
  min-height: calc(100% - 523px);
  background-color: #f8f8f8;

  .goods-list-content {
    width: 1080px;
    margin: 0 auto;

    .goods {
      margin-top: 10px;
      li {
        display: inline-block;
        width: 264px;
        height: 440px;
        background-color: #fff;
        box-sizing: border-box;
        cursor: pointer;
        margin: 0 8px 8px 0;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);

        &:hover {
          border: 1px solid var(--color-primary);
        }

        &:nth-child(4n) {
          margin-right: 0;
        }

        img {
          width: 262px;
          height: 264px;
        }

        .info {
          display: flex;
          flex-direction: column;
          padding: 8px 10px;
          box-sizing: border-box;

          .goods-price {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
              line-height: 25px;
              font-size: 18px;
              color: var(--color-primary);
              font-family: 'PingFangSC-Semibold';
              font-weight: 600;
            }

            .shoppingcart {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 34px;
              height: 34px;
              background-color: var(--color-primary);
              border-radius: 50%;

              img {
                width: 18px;
                height: 18px;
              }
            }
          }
          .goods-brand{
            display: flex;
            .sitePng{
              margin-right: 5px;
              img {
                width: 10px;
                height: 10px;
              }
            }

            .siteBrand{
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #606266;
              letter-spacing: 0;
              font-weight: 400;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .goods-sub {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 20px;
            color: var(--color-primary);
            margin: 6px 0 15px 0;
          }

          .goods-name {
            color: #303133;
            letter-spacing: 0;
            line-height: 22px;
            font-size: 16px;
            font-weight: 500;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 8px 0;
          }

        }
      }
    }
  }
}
</style>
